import { motion } from 'framer-motion';
import { useInView } from 'react-intersection-observer';
import { Link, ClipboardList, Send, Sparkles } from 'lucide-react';

const HowItWorks = () => {
  const steps = [
    {
      icon: <Link size={32} />,
      title: '第1步：连接账号',
      description: '安全授权您的小红书账号，我们仅在您的许可下访问数据，全程保障您的隐私安全。'
    },
    {
      icon: <ClipboardList size={32} />,
      title: '第2步：输入主题',
      description: '告诉AI您的核心创作主题或几个关键词，定义您想要的笔记风格和内容方向。'
    },
    {
      icon: <Sparkles size={32} />,
      title: '第3步：一键生成',
      description: 'AI引擎启动，结合实时热点和爆款模式，为您量身打造高质量的文案、标题和标签组合。'
    },
    {
      icon: <Send size={32} />,
      title: '第4步：发布与优化',
      description: '您可以直接复制内容发布，或根据AI提供的优化建议进行微调，让每篇笔记都更具爆款潜力。'
    }
  ];

  const [ref, inView] = useInView({
    triggerOnce: true,
    threshold: 0.2,
  });

  const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        staggerChildren: 0.2,
        delayChildren: 0.1,
      },
    },
  };

  const itemVariants = {
    hidden: { opacity: 0, y: 30 },
    visible: {
      opacity: 1,
      y: 0,
      transition: { duration: 0.5 },
    },
  };

  return (
    <section id="how-it-works" className="how-it-works">
      <div className="container">
        <div className="section-header">
          <h2>仅需四步，开启您的爆款之旅</h2>
          <p>我们设计了极致简洁的操作流程，让您可以专注于创作本身，而非繁琐的过程。</p>
        </div>
        <motion.div
          ref={ref}
          className="steps-container"
          variants={containerVariants}
          initial="hidden"
          animate={inView ? 'visible' : 'hidden'}
        >
          {steps.map((step, index) => (
            <motion.div key={index} className="step-card" variants={itemVariants}>
              <div className="step-icon">{step.icon}</div>
              <div className="step-number">0{index + 1}</div>
              <h3 className="step-title">{step.title}</h3>
              <p className="step-description">{step.description}</p>
            </motion.div>
          ))}
          <div className="steps-line"></div>
        </motion.div>
      </div>
    </section>
  );
};

export default HowItWorks; 